<template>
  <div class="backstage">
    <aside>
      <router-link :to="$route.path==='/backstage'?'/doctorPage':'/backstage'">
        <img :src="'/api/common/download?name='+doctorNow.photo" alt="头像" class="my-avatar"/>
      </router-link>
      <el-menu
          :default-active="$route.path"
          active-text-color="#ffd04b"
          background-color="pink"
          router
          text-color="white"
      >
        <el-sub-menu index="">
          <template #title>
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item-group :title="doctorNow.name">
            <el-menu-item index="/backstage">个人资料</el-menu-item>
            <el-menu-item index="/backstage/x-departmentList">科室列表</el-menu-item>
            <el-menu-item index="/backstage/x-doctorList">医生列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="/backstage/y-clientList">
          <el-icon>
            <User/>
          </el-icon>
          <span>用户列表</span>
        </el-menu-item>
        <el-menu-item index="/backstage/y-petList">
          <el-icon>
            <Football/>
          </el-icon>
          <span>宠物列表</span>
        </el-menu-item>
        <el-menu-item index="/backstage/y-appointmentList">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>挂号列表</span>
        </el-menu-item>
        <el-menu-item index="/backstage/y-adoptList">
          <el-icon>
            <School/>
          </el-icon>
          <span>领养列表</span>
        </el-menu-item>
        <el-menu-item index="/backstage/y-fosterList">
          <el-icon>
            <OfficeBuilding/>
          </el-icon>
          <span>寄养列表</span>
        </el-menu-item>
        <el-menu-item index="/backstage/y-noticeList">
          <el-icon>
            <DataBoard/>
          </el-icon>
          <span>公告列表</span>
        </el-menu-item>
      </el-menu>
    </aside>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script lang="ts" setup>
import {DataBoard, Football, Menu as IconMenu, OfficeBuilding, School, Tickets, User,} from '@element-plus/icons-vue'
import {reactive} from "vue";
import {reqGetLoginD} from "@/request/DoctorApi";

const doctorNow = reactive({
  name: "",
  photo: "zs.jpg"
})
reqGetLoginD().then(res => {
  doctorNow.photo = res.doctorPhoto
  doctorNow.name = res.doctorName
})
</script>



<style lang="scss" scoped>
.backstage {
  height: 96vh;
  display: flex;
  /*侧边栏*/
  aside {
    max-width: 180px;
    height: 100%;
    background-color: #ffb6c1; /* 浅粉色背景 */
    box-sizing: border-box;
    padding: 4px;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);

    /*头像*/
    img.my-avatar {
      border-radius: 50%;
      position: relative;
      height: 72px;
      width: 72px;
      top: 20px;
      left: 50%;
      margin-left: -36px;
      border: 3px solid #ff69b4; /* 粉色边框 */
      box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3);
    }

    /*导航菜单*/
    .el-menu {
      position: relative;
      top: 16px;
      background-color: transparent;
      border-right: none;

      &:not(.el-menu--collapse) {
        width: 180px;
      }

      .el-sub-menu, .el-menu-item {
        margin: 4px 0;
        border-radius: 8px;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(255, 105, 180, 0.2);
        }
      }

      .el-menu-item.is-active {
        background-color: #ff69b4 !important; /* 选中项粉色背景 */
        color: #fff !important;
      }
    }
  }

  main {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background-color: #fff5f5; /* 非常浅的粉色背景 */
    z-index: 0;
  }
}

/* 全局样式调整 */
:deep(.el-form-item) {
  width: 50%;
  z-index: 0;

  .el-input__inner, .el-textarea__inner {
    border-radius: 8px;
    border-color: #ffb6c1;

    &:focus {
      border-color: #ff69b4;
      box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2);
    }
  }
}

:deep(.el-table) {
  width: 100%;

  th {
    background-color: #ffebee !important; /* 表头浅粉色 */
  }

  tr:hover {
    td {
      background-color: #fff0f5 !important; /* 行悬停效果 */
    }
  }
}

/* 按钮样式调整 */
:deep(.el-button--primary) {
  background-color: #ff69b4;
  border-color: #ff69b4;

  &:hover {
    background-color: #ff1493;
    border-color: #ff1493;
  }
}
</style>
